<template>
  <div class="inplace">
    <my-head title="入场管理" :isRightClick = "true"/>

    <mu-text-field v-model="vin" @blur="" placeholder="VIN" ref="vin" class='input' @keyup.enter.native="getData()"><i class="iconfont icon-saomiao" @click="scan('vin')"></i></mu-text-field>

    <mu-paper class="paper" :z-depth="2" v-show="isShowCard" >
        <div class="list-content">VIN ：<span>{{vin}}</span></div>
        <div class="list-content">车型：<span>{{infoForm.car}}</span><em class="space"></em>颜色：<span>{{infoForm.color}}</span></div>
        <div class="list-content">类型：<span class="library-position">{{infoForm.type}}</span></div>
        <div class="list-content">入场时间：<span>{{infoForm.time}}</span></div>
    </mu-paper>
    <!--QR-->
    <mu-dialog transition="slide-left" fullscreen :open.sync="openFullscreen">
        <mu-appbar color="primary" title="">
            <mu-button slot="left" icon @click="closeFullscreenDialog" class="close">
               关闭
            </mu-button>
        </mu-appbar>
        <div class="dispatch-detailed">
          <div id="bcid">
            <div class="bcid-height"></div>
            <p class="tip">...载入中...</p>
          </div>
        </div>
    </mu-dialog>
    <scanning v-if="isScanning" :mark="scanMark" v-on:childByValue="childByValue" v-on:closeing="closeing"/>
  </div>
</template>

<script>
var scan = null;
import myHead from '@/components/header'
import scanning from "@/components/scanning"
import api from "@/common/api"
export default {
  name: 'inplace',
  components: {
    myHead, scanning
  },
  data () {
    return {
        scanMark: '',
        isScanning: false,
        openFullscreen: false,
        vin: "",
        isShowCard: false,
        infoForm: {
            car: "",
            time: "",
            type: "",
            color: ""
        },
        requestOnce: true
    }
  },
  methods: {
    closeing (val) {
      val ? this.isScanning = false : null;
    },
    childByValue (val) {
      if(val){
        if(val.split('&')[1] == 'vin'){
          this.vin = val.split('&')[0];
          this.getData();
        }
      }
    },
    scan (txt) {
      this.scanMark = txt;
      this.isScanning = true;
    },
    closeFullscreenDialog(){
      this.openFullscreen = false;
      this.closeScan();
    },
    scanQR(){
      this.openFullscreen = true;
      let _this = this;
      if (!window.plus) {return;}
      setTimeout(() => {
        scan = new plus.barcode.Barcode('bcid');
        scan.onmarked = onmarked;
        function onmarked(type, result, file) {
          switch (type) {
            case plus.barcode.QR:
              type = 'QR';
              break;
            case plus.barcode.EAN13:
              type = 'EAN13';
              break;
            case plus.barcode.EAN8:
              type = 'EAN8';
              break;
            default:
              type = '其它' + type;
              break;
          }
          result = result.replace(/\n/g, '');
          _this.vin = result;
          _this.closeScan();
        }
      }, 40);
    },
    //开始扫描
    startScan() {
      if (!window.plus) {return;}
      scan.start();
    },
    //关闭
    closeScan() {
      this.openFullscreen = false;
      if (!window.plus) {return;}
      scan.close();
    },
    getData () {
        if(this.vin !== ''){
            // 更新数据
            let data = Object.assign({},this.$store.state.user,{
                content: {
                    vin : this.vin
                }
            });
            if(this.requestOnce){
                this.requestOnce = false;
                this.common.reqData(api.app('inPlace'), data, res=>{
                    console.log(res.data)
                    this.requestOnce = true;
                    if(res.data.status == 100){
                        this.isShowCard = true;
                        this.infoForm.car = res.data.content.vehicleType;
                        this.infoForm.color = res.data.content.color;
                        this.infoForm.time = res.data.content.inTime;
                        this.infoForm.type = res.data.content.type;
                        this.Toast.success({
                            duration: 1000,
                            mask: true,
                            message: "入场扫描成功"
                        });
                    }else{
                        this.Toast({
                            duration: 1500,
                            mask: true,
                            message: res.data.msg
                        });
                    }
                },err =>{
                    this.requestOnce = true;
                    console.log(err)
                    this.Toast.clear();
                });
            }
        }else{
            console.log('vin不能为空')
        }
    }
  },
  mounted () {
    // 获取焦点
    this.$refs.vin.$el.children[0].getElementsByTagName('input')[0].focus();
    window.plus ? plus.key.hideSoftKeybord() : 0;
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.inplace{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}
.input{
    display: block;
    margin: 15px auto;
    width: 85%;
}
.paper, .state, .msg{
    width: 85%;
    margin: 4em auto 0;
    padding: 1.5em 0;
}
.state, .msg{
    text-align: center;
    color: red;
    font-size: 1em;
}
.list-content{
    padding: 8px 20px;
}
.library-position{
    font-size: 2.2em;
    font-weight: bold;
    color: red;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
.space{
    padding: 0 20px;
}
.btn{
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
}
.btn .mu-raised-button{
  font-size: 18px;
  height: 40px;
  line-height: 40px;
}
.mu-paper{
  box-shadow: none;
}
.mu-dialog-body{
  height: 100%;
}
#bcid{
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ccc;
  text-align: center;
}
.bcid-height{
  height: 40%;
}
.mu-appbar.mu-primary-color{
    height: 40px;
    line-height: 40px;
    z-index: 9999;
}
.mu-button.close{
    width: 78px;
    font-size: 1em;
}
div.mu-appbar-title{
    line-height: 40px;
}
</style>
